<template>
  <div>
    <div class="head">
      <div class="head-1">
        <img :src="img1" />
      </div>
    </div>

    <div class="contents">
      <div class="con1">
        <a href="https://www.sohu.com/a/369056514_229848">
          <span>
            <i class="el-icon-edit"></i>
            资料库</span
          >
        </a>
        <div class="con1-right">
          <img :src="img2" />
        </div>
        <div class="con1-left">
          <br />
          <span> <i class="el-icon-bell"></i>新型冠状病毒 COVID-19</span>
          <br />
          <h1>
            <i class="el-icon-bell"></i>
            <a>传播途径:</a>
            经呼吸道飞沫传播，亦可通过接触传播，存在粪-口传播可能性
          </h1>
          <br />
          <h2>
            <i class="el-icon-bell"></i>
            <a>易感人群:</a>
            人群普遍易感
          </h2>
          <br />
          <h3>
            <i class="el-icon-bell"></i>

            <a>潜伏期:</a>
            一般为 3～7 天，最长不超过 14 天，潜伏期内存在传染性
          </h3>
          <br />
          <h4>
            <i class="el-icon-bell"></i>
            <a>宿主:</a> 野生动物，可能为中华菊头蝠，穿山甲可能为潜在中间宿主
          </h4>
        </div>
      </div>
      <div class="con2">
        <a href="https://www.163.com/dy/article/FVSUIKOH05149T3G.html">
          <span>
            <i class="el-icon-user"></i>
            疫情防范
          </span>
        </a>

        <div class="con2-1">
          <img :src="img3" />
        </div>
        <div class="con2-2">
          <img :src="img4" />
        </div>
        <div class="con2-3">
          <img :src="img5" />
        </div>
      </div>

      <div class="con3">
        <div class="con3-1">
          <a>戴口罩</a>
          <h1>
            降低及预防新型冠状病毒感染风险。
            口罩不仅可以防止接触到病毒携带者喷射飞沫,
            降低飞沫量和喷射速度,还可以阻挡含病毒的飞沫核, 防止佩戴者吸入。
          </h1>
        </div>

        <div class="con3-2">
          <a>勤洗手</a>
          <h2>
            一般来讲，用流动的水和香皂洗手15秒, 可带走手上 90% 的细菌,持续洗 30
            秒 可将手上 99.9% 的细菌全部带走。
          </h2>
        </div>

        <div class="con3-3">
          <a>多消毒</a>
          <h3>
            酒精为医用酒精，医用酒精属于食用酒精，用于药品生产，用粮食以糖化酶法发酵制得，按比例稀释成75%的医用消毒酒精。
          </h3>
        </div>

        <div class="con4">
          <div class="con4-1">
            <img :src="img6" />
          </div>
          <div class="con4-2">
            <img :src="img7" />
          </div>
          <div class="con4-3">
            <img :src="img8" />
          </div>
        </div>

        <div class="con5-1">
          <a>开窗通风</a>
          <h1>
            外界空气本身致病的几率就低， 开窗通风，不仅仅不会增加感染几率，
            还会改善室内空气质量；总之，
            对于大部分人来说，蜗居家中预防新型肺炎， 定时开窗是明智的选择。
          </h1>
        </div>

        <div class="con5-2">
          <a>不扎堆</a>
          <h2>
            要管住腿、少出门。注意自我保护，戴好口罩、
            吃饭用公筷，保持一米以上安全距离，减少进入
            密闭空间的机会。不扎推、不聚集！疫情防控的
            措施中，“不聚集”是重要的第一条。
          </h2>
        </div>

        <div class="con5-3">
          <a>拒食野味</a>
          <h3>
            我们每一个人要以国 家利益、人民利益为重，争做一名仁人君子，带
            头保护自然、呵护野生动物，做到一生不食野味
            ！从自我做起、从当下做起，爱护动物，坚决不食野味。
          </h3>
        </div>
      </div>

      <div class="con6">
        <div class="con6-left">
          <img :src="img9" />
        </div>
        <div class="con6-right">
          <h1>抗击疫情</h1>
          <a href="https://www.163.com/dy/article/FVSUIKOH05149T3G.html">
          <div class="button">
            <el-button size="medium" type="success">了解更多</el-button>
          </div>
          </a>
        </div>
      </div>
      <div class="footer">
        <img :src="img10" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img1: require("../assets/p13.jpg"),
      img2: require("../assets/p14.jpg"),
      img3: require("../assets/p15.jpg"),
      img4: require("../assets/p16.jpg"),
      img5: require("../assets/p17.jpg"),
      img6: require("../assets/p18.jpg"),
      img7: require("../assets/p19.jpg"),
      img8: require("../assets/p20.jpg"),
      img9: require("../assets/foot2.jpg"),
      img10: require("../assets/foot1.jpg"),
    };
  },
  computed: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped>
a {
  text-decoration: none;
}
.head {
  height: 350px;
  /* background-color: pink;  */
}
.head .head-1 img {
  position: relative;
  width: 1193px;
  height: 350px;
}
.contents {
  margin-top: 50px;
  margin: 0 auto;
  /* height: 1600px; */
  /* background-color: salmon; */
}
.con1 {
  height: 380px;
  margin: 0 auto;
}
.contents .con1 .con1-left {
  position: relative;

  left: 40px;
  top: -320px;
  line-height: 5px;
}
.contents .con1 span:first-child {
  font-size: 30px;
  font-weight: bold;
  color: #2cb5ac;
}
.con1-left > span {
  font-size: 23px;
  font-weight: bold;
  /* color: black; */
}
.con1-left h1,
h2,
h3,
h4 {
  margin-top: 20px;
  font-size: 15px;
}
.contents .con1 .con1-left a {
  font-size: 20px;
  font-weight: bold;
}
.contents .con1 img {
  position: relative;
  right: -600px;
  top: -50px;
  height: 350px;
  width: 600px;
}
.con2 {
  margin-top: 60px;
  height: 500px;

  background-attachment: fixed;
  background-position: center 0;
}
.con2 span {
  position: relative;
  top: -20px;
  width: 500px;
  height: 100px;
  font-size: 30px;
  color: #2cb5ac;
}
.con2 .con2-1 img {
  width: 300px;
  height: 300px;
  float: left;
  margin-left: 55px;
  margin-right: 50px;
}
.con2 .con2-2 img {
  width: 300px;
  height: 300px;
  float: left;
  margin-right: 50px;
}
.con2 .con2-3 img {
  width: 300px;
  height: 300px;
  float: left;
}
.con3 h1,
h2,
h3 {
  font-size: 15px;
}
.con3-1 {
  position: relative;
  top: -154px;
  left: 55px;
  float: left;
  width: 300px;
  height: 120px;
  /* background-color: #51c0f0; */
}
.con3-2 {
  position: relative;
  top: -268px;
  left: 405px;
  width: 300px;
  height: 120px;
  /* background-color: #51c0f0; */
}
.con3-3 {
  position: relative;
  top: -267px;
  left: 755px;
  width: 300px;
  height: 120px;
  /* background-color: #51c0f0; */
}
.con3 a {
  font-size: 30px;
  font-weight: bold;
  color: cornflowerblue;
}
.con4 .con4-1 img {
  width: 300px;
  height: 300px;
  float: left;
  margin-left: 55px;
  margin-right: 50px;
  position: relative;
  top: -230px;
}
.con4 .con4-2 img {
  width: 300px;
  height: 300px;
  float: left;
  margin-right: 50px;
  position: relative;
  top: -230px;
}
.con4 .con4-3 img {
  width: 300px;
  height: 300px;
  float: left;
  position: relative;
  top: -230px;
}
.con5-1 {
  width: 300px;
  height: 120px;
  position: relative;
  top: -225px;
  left: 50px;
}
.con5-2 {
  width: 300px;
  height: 120px;
  position: relative;
  top: -225px;
  left: 400px;
  /* color: red; */
}
.con5-3 {
  width: 300px;
  height: 120px;
  position: relative;
  top: -225px;
  left: 750px;
}
.con5 a {
  font-size: 30px;
  font-weight: bold;
}
.con6 {
  margin-top: 50px;
  height: 200px;
  /* background-color: pink; */
  position: relative;
  top: -130px;
}
.con6-left {
  width: 500px;
  height: 100px;
  /* background-color: red; */
}
.con6-left img {
  width: 700px;
  height: 300px;
}
.con6 .button {
  height: 100px;
}
.con6-right {
  width: 200px;
  height: 50px;
  position: relative;
  top: 40px;
  right: -850px;
  /* background-color: cyan; */
}
.con6-right h1 {
  color: darkgray;
  font-size: 16px;
  float: left;
  position: relative;
  top: -10px;
}
/* .footer { */
/* height: 300px; */
/* background-color: teal; */
/* } */
.footer img {
  height: 250px;
  width: 100%;
}
</style>